<template>
  <div class="hot-sub item">
    <div class="item-h">
      <span class="line"></span>
      <b class="ftz16">热门订阅</b>
    </div>
    <div class="hot-sub-c">
      <NoDataTips v-if="list.length === 0" />
      <ul v-else>
        <li v-for="(item, index) in list" :key="item.planId">
          <router-link :to="'/plan/'+ item.planId">
            <span class="ftz16 title">{{item.name}}</span>
            <span class="txt">{{item.intro}}</span>
            <div class="tips">
              <router-link :to="'/dashboard/plan/'+ item.userId">
                <span class="photo photo-level">
                  <img :src="item.avatar">
                  <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                </span>
                <span>{{item.author}}</span>
              </router-link>
              <template v-if="item.userId !== userId">
                <!--paid   0 未订阅 1 已订阅 null 未登录 -->
                <template v-if="item.paid === 1">
                  <button id="sub_btn" class="fr gray" @mouseout="showCancleBtn(item, index, false)" @mouseover="showCancleBtn(item, index, true)">
                    {{!item.cancleBtn ? '已订阅' : '取消订阅' }}
                  </button>
                </template>
                <template v-else>
                  <button id="sub_btn" class="fr">立即订阅</button>
                </template>
              </template>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ['list'],
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  data () {
    return {
      cancleBtn: false
    }
  },
  methods: {
    showCancleBtn (item, index, flag) {
      let newItem = { ...item }
      newItem.cancleBtn = flag
      this.$set(this.list, index, newItem)
    }
  }
}
</script>

<style scoped lang="scss">
.hot-sub {
  margin-bottom: 30px;
}

.hot-sub .item-h {
  padding: 0 4%;
}
.hot-sub .hot-sub-c li {
  padding: 12px 5%;
  height: 110px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
}
.hot-sub .hot-sub-c li:last-child {
  border-bottom: 0;
}
.hot-sub .hot-sub-c .title {
  display: block;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hot-sub .hot-sub-c .txt {
  color: #808080;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 6px;
}
.hot-sub .hot-sub-c .tips {
  width: 100%;
  width: 90%;
  padding: 0 5%;
  position: absolute;
  left: 0;
  bottom: 12px;
}
.hot-sub .hot-sub-c .tips span {
  color: #808080;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-sub .hot-sub-c .tips .photo {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 6px;
}
.hot-sub .hot-sub-c .tips .photo img {
  width: 100%;
  height: 100%;
}
.hot-sub .hot-sub-c .tips button {
  width: 78px;
  height: 26px;
  color: #fff;
  font-size: 12px;
  background: #e94f4f;
  border-radius: 13px;
  &.gray {
    background-color: #a6a6a6;
  }
}
</style>
